<template>
	<view>
		<view class="content">
			<view class="avatar">
				<image :src="user.avatarUrl" mode=""></image>
			</view>
			<text>{{user.uname}}</text>
			<text>{{user.phone}}</text>
			<u-icon @click="toEdit" label="编辑" labelPos="left" name="edit-pen-fill" color="#fff" size="28"></u-icon>
		</view>
		<view class="login-box .centerXY-g" @click = "showModal = true">
			退出登录
		</view>
		<u-modal :show="showModal" @confirm="logout" ref="uModal" :asyncClose="true" :closeOnClickOverlay="true"
			showCancelButton @cancel="showModal=false" @close="showModal=false" title='确定要退出登录吗？'
			content="退出登录将无法再使用小程序服务!"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				showModal : false
			}
		},
		onShow() {
			this.user = this.$store.state.userInfo
		},
		methods: {
			logout() {
				uni.removeStorageSync('token')
				uni.navigateTo({
					url: '/pages/index/index'
				})
				this.showModal = false
			},
			toEdit(){
				uni.navigateTo({
					url:'/pages/edit/edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 20rpx;
	background-color: #22a5f1;
	height: 500rpx;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.avatar{
	height: 300rpx;
	width: 300rpx;
	border-radius: 250rpx;
	background-color: #000;
	overflow: hidden;
	image{
		width: 100%;
		height: 100%;
	}
}

	.login-box {
		position: fixed;
		top: 70%;
		padding: 0 40rpx;
		background-color: #4d7ff2;
		box-shadow: 0 2rpx 20rpx 0 rgba(0, 0, 0, 0.08);
		width: 80%;
		height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		text-align: center;
		line-height: 90rpx;
	}
</style>
